<template>
  <div class="banner"
       :class="{'banner-one':bannerData.length===1}">
    <el-carousel :height="bannerHeight + 'px'"
                 :arrow="arrow"
                 :interval="4000"
                 trigger="click">
      <el-carousel-item v-for="(item, index) in bannerData"
                        :key="index">
        <a v-if="item.carouselUrl"
           class="banner-item"
           target="__blank"
           :href="item.carouselUrl">
          <img class="banner-img"
               :src="item.carouselImage"
               alt="" />
        </a>
        <a v-else
           class="banner-item"
           href="javaScript:;">
          <img class="banner-img"
               :src="item.carouselImage"
               alt="" />
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  props: ["bannerData"],
  data () {
    return {
      isOne: false,
      bannerHeight: 332,
      arrow: "hover",
      screenWidth: document.body.clientWidth,
      // bannerData: [
      //   {
      //     id: 1,
      //     type: 1,
      //     carouselImage: require("../../assets/images/sendaryBanner.png"),
      //     carouselUrl: "https//www.baidu.com",
      //     sort: 1,
      //   },
      //   {
      //     id: 1,
      //     type: 1,
      //     carouselImage: require("../../assets/images/sendaryBanner.png"),
      //     carouselUrl: "https//www.baidu.com",
      //     sort: 1,
      //   },
      //   {
      //     id: 1,
      //     type: 1,
      //     carouselImage: require("../../assets/images/sendaryBanner.png"),
      //     carouselUrl: "https//www.baidu.com",
      //     sort: 1,
      //   },
      // ],
    };
  },
  watch: {
    screenWidth (newVal) {
      this.bannerHeight = (332 / 1920) * this.screenWidth;
      if (this.bannerHeight < 121) this.bannerHeight = 121;

      if (newVal < 768) this.arrow = "always";
      else this.arrow = "hover";
    },
  },
  methods: {
    bannerScreenWidth () {
      window.screenWidth = document.body.clientWidth;
      this.screenWidth = window.screenWidth;
    },
  },
  created () {
    this.bannerHeight = (332 / 1920) * this.screenWidth;
    if (this.bannerHeight < 121) this.bannerHeight = 121;

    if (this.screenWidth < 768) this.arrow = "always";
    else this.arrow = "hover";
  },
  mounted () {
    window.addEventListener("resize", () => this.bannerScreenWidth(), false);
  },
  beforeDestroy () {
    window.removeEventListener("resize", this.bannerScreenWidth(), false);
  },
};
</script>

<style scoped lang="less">
@media screen and (min-width: 1032px) {
  .banner {
    // height: 332px;
    /deep/.el-carousel {
      height: 100%;
      overflow: hidden;
      .el-carousel__indicator {
        width: 64px;
        padding: 0;
        padding-bottom: 25px;
        margin-right: 8px;
        .el-carousel__button {
          width: 64px;
          height: 3px;
        }
      }
      .el-carousel__container {
        height: 100%;
        .el-carousel__item {
          .banner-item {
            display: block;
            height: 100%;
            .banner-img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .banner-one {
    /deep/.el-carousel {
      height: 100%;
      overflow: hidden;
      .el-carousel__indicator {
        display: none;
        .el-carousel__button {
          width: 64px;
          height: 3px;
        }
      }
      .el-carousel__container {
        .el-carousel__arrow {
          display: none;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1032px) {
  .banner {
    // height: 200px;
    /deep/.el-carousel {
      height: 100%;
      overflow: hidden;
      .el-carousel__indicator {
        width: 52px;
        padding: 0;
        padding-bottom: 24px;
        margin-right: 8px;
        .el-carousel__button {
          width: 100%;
          height: 3px;
        }
      }
      .el-carousel__container {
        height: 100%;
        .el-carousel__item {
          .banner-item {
            display: block;
            height: 100%;
            .banner-img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .banner-one {
    /deep/.el-carousel {
      height: 100%;
      overflow: hidden;
      .el-carousel__indicator {
        display: none;
        .el-carousel__button {
          width: 64px;
          height: 5px;
        }
      }
      .el-carousel__container {
        .el-carousel__arrow {
          display: none;
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .banner {
    // height: 121px;
    /deep/.el-carousel {
      height: 100%;
      .el-carousel__indicator {
        width: 16px;
        padding: 0;
        padding-bottom: 12px;
        margin-right: 4px;
        .el-carousel__button {
          width: 100%;
          height: 3px;
        }
      }
      .el-carousel__container {
        height: 100%;
        .el-carousel__item {
          .banner-item {
            display: block;
            height: 100%;
            .banner-img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .banner-one {
    /deep/.el-carousel {
      height: 100%;
      overflow: hidden;
      .el-carousel__indicator {
        display: none;
        .el-carousel__button {
          width: 64px;
          height: 3px;
        }
      }
      .el-carousel__container {
        .el-carousel__arrow {
          display: none;
        }
      }
    }
  }
}
</style>
